<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <title>Home Page</title>
  <link rel="stylesheet" href="<?=base_url() ?>assets/css/jquery.mobile-1.4.2.min.css" />
    <link rel="stylesheet" href="<?=base_url() ?>assets/css/pcs.css">
	<script src="<?=base_url() ?>assets/js/jquery-1.9.1.min.js"></script>
	<script src="<?=base_url() ?>assets/js/jquery.mobile-1.4.2.min.js"></script>
	<!--script src="<?=base_url() ?>assets/js/ajax_post_data.js"></script-->
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
</head>
<body  onload="getLocation()">
<!-- Home -->

<div data-role="page" id="home" class="pcs-demos" style ="background: transparent;">
    <div data-theme="d" data-role="header" data-position="fixed" class="pcs-header">
        <a data-role="button" href="#detailspanel" data-mini="true" class="ui-btn-icon-left ui-icon-bars ui-btn ui-mini ui-corner-all ui-btn-right ">
            Menu
        </a>
        <a id="homebtn" data-role="button" data-direction="reverse" href="#home"
        data-icon="home" data-iconpos="left" class="ui-btn ui-corner-all  ui-btn-icon-left ui-icon-home ui-mini ui-btn-left">
            Home
        </a>
		
        <h5 id="headertxt" class="header">
            DriveTrue
        </h5>
    </div>
    <div data-role="content">
	<script>
					function success(position) {
					  var mapcanvas = document.createElement('div');
					  mapcanvas.id = 'mapcontainer';
					  mapcanvas.style.height = '250px';
					  mapcanvas.style.width = '100%';

					  document.querySelector('article').appendChild(mapcanvas);

					  var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
					  
					  var options = {
						zoom: 15,
						center: coords,
						mapTypeControl: false,
						navigationControlOptions: {
							style: google.maps.NavigationControlStyle.SMALL
						},
						mapTypeId: google.maps.MapTypeId.ROADMAP
					  };
					  var map = new google.maps.Map(document.getElementById("mapcontainer"), options);

					  var marker = new google.maps.Marker({
						  position: coords,
						  map: map,
						  title:"You are here!"
					  });
					}

					if (navigator.geolocation) {
					  navigator.geolocation.getCurrentPosition(success);
					} else {
					  error('Geo Location is not supported');
					}

					</script>
		<div class="content-primary">
		
			<h3>
				
					
			</h3>
			<center>
			<h2>
				My Position 
			</h2>
			<article>
						
			</article>
			
			<div data-role="collapsible" data-mini="true">
			<h3>Input Data</h3>		
			<?php echo $map;?>
				<form name="form_save" id="form_save" action="">
					<input name="my_lat" id="text-lat" type="hidden" />
					<input name="my_lon" id="text-lon" type="hidden" />
					<input  name="shop_name" id="text-shop-name" type="text" placeholder="Location Name (Building, Shop, Cafe, SPBU, Tambal Ban :D, etc.)" />
					<input name="desc" id="text-goods-desc" type="text" placeholder="Additional Description"/>
					<input name="goods_name" id="text-goods-name" type="text" placeholder="Contributor - Your Name/Initial/Email if necessary :D" />
					<button id="submit" type="button" onclick="javascript:makeAjaxCall1();">Save</button>
				</form>
				
				</div>
			
		 </center>
		</div>
	</div>
			
	<!-- details panel  -->
	<div data-role="panel" id="detailspanel" data-position="right" data-display="overlay" data-theme="b">
        
		<h3>Menu</h3>
		<hr >
		<ul data-role="listview">
			<li><a href="#">coming soon :D</a></li>
			<li><a href="#">coming soon :D</a></li>
			<li><a href="#">coming soon :D</a></li>
		</ul>
	</div><!-- /details panel -->
	
    <div data-theme="d" data-role="footer" data-position="fixed" class="pcs-header">
        <h3>
		&copy; 2014 DriveShop - <i> Everything on The Best Way </i>
        </h3>
    </div>
</div>
			<script>
			
				function makeAjaxCall1(){
					$.ajax({
						type: "post",
						url: "<?=base_url() ?>index.php/shop/save",
						cache: false,				
						data: $('#form_save').serialize(),
						success: function(json){	
							alert('sdsdsdds');
						try{		
							var obj = jQuery.parseJSON(json);
							alert( obj['STATUS']);
							$("#form_save")[0].reset();		
							
						}catch(e) {		
							alert('Exception while request..');
						}		
						},
						error: function(){						
							alert('Error while request..');
						}
				 });
				}
			</script>
</body>
</html>
